import * as React from 'react';
import {
    View,
    Text,
    TouchableOpacity
} from 'react-native';
import { TabView,} from 'react-native-tab-view';
import ProductItem from '../../components/register/ProductItem';
import {
    scaleSize,
    deviceWidth,
    deviceHeight
} from '../../../utils/screen';
import * as registerActions from '../actions/registerActions';
import styles from './index.style'

import {
  connect
} from "react-redux";
import {
  bindActionCreators
} from "redux";
import { ScrollView } from 'react-native-gesture-handler';
import {IMGCACHEPATH} from '../../../utils/downImgUtils';
import FontText from '../../components/FontText';
class Product extends React.Component {
  constructor(props){
      super(props);
      this.state = {
        index: 0,
        routes: props.register.categorys
      }
  }
  render() {
    let viewWidth = this.props.width || deviceWidth - scaleSize(550);
    let viewHeight = this.props.height || deviceHeight - scaleSize(290);
    return (
      <TabView
        navigationState={this.state}
        useNativeDriver = {true}
        renderScene = {(e) => this.renderScene(e)}
        onIndexChange = {(index)=>this.onIndexChange(index)}
        initialLayout={{ width: viewWidth,height:viewHeight}}
        renderTabBar= {()=>null}
      />
    );
  }
  componentDidUpdate(){
    let {register} = this.props;
    if (register.classIndex != this.state.index){
      this.setState({
        index: register.classIndex
      })
    }
  }
  onIndexChange(index){
    let {onIndexChange} = this.props;
    this.setState({
      index: index
    })
    onIndexChange && onIndexChange(index);
  }
  renderProductItem(item,index){
    if(index == 0){
      return (
        <TouchableOpacity
          key = {`eval_${index}`}
          onPress = {()=>this.onItempress()} 
          style = {[styles.productItem,styles.customView,{borderColor: "#b4b4b6"}]}>
          <View style = {styles.customShow}>
            <FontText font = {'book'} style = {styles.customText}>Costom Item</FontText>
          </View>
        </TouchableOpacity>
      )
    }
    let selectItem = this.isSelected(item);
    return (
      <View key = {`eval_${index}`} style = {styles.productItem}>
        {
          selectItem?
          <View style = {styles.productNumberView}>
            <FontText font = {'book'} style = {styles.productNumber}>{selectItem}</FontText>
          </View>
          :null
        }
        <ProductItem
          {...item}
          isSelected = {selectItem?true:false}
          onPress = {()=>this.onItempress(item)}
          images = {[{url:`file://${IMGCACHEPATH}${item.gallery.main.name}`}]}
          index = {index} />
      </View>
    )
  }
  onItempress(item = null){
    let {onItempress} = this.props;
    onItempress && onItempress(item);
  }
  isSelected(product){
    let {cartList} = this.props.register;
    let qty = 0;
    cartList.forEach(item=>{
      if(item.id == product.server_product_id){
        qty += Number(item.qty);
      }
    })
    return qty;
  }
  renderScene(e){
    return (
        <ScrollView>
            <View style = {styles.productScene}>
                {
                    Array.isArray(e.route.products) && e.route.products.map((item, index) => {
                        return this.renderProductItem(item, index)
                    })
                }
            </View>
        </ScrollView>
    )  
  }
}

export default connect(
    state => ({
        register: state.register
    }),
    dispatch => bindActionCreators(registerActions, dispatch)
)(Product);